<template>
	<view class="app">
		<!-- 地图 map -->
		<!-- <view class="page-section page-section-gap"> -->
		<!-- show-location :show-compass="true" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" -->
		<map style="width: 100%; height: 100vh;" class="maps" :markers="markers" :scale="Number(scale)" :latitude="Number(latitude)"
		 :longitude="Number(longitude)" @markertap="makerTap" >
			<!-- <cover-image></cover-image> -->

<!-- 			<cover-image class="refresh w80 left top70" src="@/static/img/map/refresh.png" mode=""></cover-image>
			<cover-image class="refresh w80 left top75" src="@/static/img/map/location.png" mode=""></cover-image>
 -->	
			
			<!-- <cover-view class="rightCoverView"> -->
			
				<cover-image style="display: none;" class="refresh w80 right top1" @click="navRouter('/pages/tabbar/polling/Sleepy/Sleepy',true)" src="@/static/img/map/tiring2.png"
				 mode=""></cover-image>
				<cover-image class="refresh w80 right top2" @click="navRouter('/pages/tabbar/polling/errorList/errorList',true)" src="@/static/img/home/fault2.png"
				 mode=""></cover-image>
				 <cover-view class="SleepyNumber" style="display: none;" v-if="Sellp">{{Sellp}}</cover-view>
				
				<cover-image class="refresh w80 right top3" src="@/static/img/map/SignICon.png" mode="" @click="navRouter('/pages/gird/signRcord/signRcord',true)"></cover-image>
			<!--</cover-view>-->
			
			
			<!-- <cover-image class="refresh w80 right top3" src="@/static/img/map/SignICon.png" mode="" @click="showBottom"></cover-image> 
			<cover-view class="singIn" src="@/static/img/map/SignICon.png" mode="" @click="signin">签到</cover-view>
			<cover-view class="singIn Reporting" src="@/static/img/map/SignICon.png" mode="" @click="showBottom">上报</cover-view>-->
			
			<cover-view class="toolBarView">
					<cover-view class="btn-operater-view" @click="navRouter('/pages/tabbar/polling/Sleepy/Sleepy',true)">
						<image class="icon-operater" src="../../../static/img/home/trapped.png"></image>
						<text class="icon-text">困人</text>
						<view class="badgeView" >{{tiringCount}}</view>
					</cover-view>
					<cover-image  class="btn-middle"  @click="showBottom">
						上报
					</cover-image>
					<cover-view class="btn-operater-view" style="position:absolute;right:0" @click="navRouter('/pages/tabbar/polling/errorList/errorList',true)">
						<image class="icon-operater" src="../../../static/img/home/fault.png"></image>
						<text class="icon-text">故障</text>
						<view class="badgeView" >{{faultCount}}</view>
					</cover-view>
				
			</cover-view>
		</map>
		<!-- </view> -->
		<!-- 搜索 -->
		
		<!-- 底部导航栏 -->

		<!-- #ifdef H5 -->
	<!-- 	<view class="content">
			<view class="search">
				<uni-search-bar :radius="100" placeholder="搜索社区"  @confirm="navRouter(`/pages/tabbar/polling/searchResult/searchResult?communityName=${$event.value}`)"></uni-search-bar>
			</view>
		</view> -->
		
		<!-- <view class="bottomInfo" v-if="currentInd != '00'">
			<view class="infoBox">
				<view class="">
					<view class="">海博广场B座</view>
					<view class="company">陕西省西安市未央区未央路城运公园北门东100米路北</view>

				</view>
				<view class="infoBottom">
					<view class="wds50">
						<view class="">
							距离您约
						</view>
						<view class="">
							<text class="distance">0.3</text>
							<text class="company">千米</text>
						</view>
					</view>
					<view class="wds50">
						<view class="">
							附近电梯
						</view>
						<view class="">
							<text class="distance">3</text>
							<text class="company">部</text>
						</view>
					</view>
				</view>

			</view>
		</view> -->
		<!-- <Tabber class="bottom" :select="select" /> -->
		<!-- #endif -->
	</view>

</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import Tabber from "../../../components/bottom.vue"
	import home from "@/serve/api/home.js"
	import sign from "@/serve/api/sign.js"
	import {mapGetters} from "vuex" 
	import {authentication} from "@/static/js/public.js"
	export default {
		components: {
			uniSearchBar,
			Tabber
		},
		data() {
			return {
				select: 0,
				scale: 19, //地图大小级别
				currentInd: "00", //底部弹出下标
				markers: [], //地图标点
				latitude: "",
				longitude: "",
				addressDetails:"",//地址
				// currentMapMasterInd: "00", //当前选中
				MasterArr: [],//所有电梯列表 
				Sellp:"",
				tiringCount:'',//困人
				faultCount :'' //故障
			}

		},
		computed:{
			...mapGetters([
				'getUserInfo',
			])
		},
		onLoad() {
			let that = this;
			// that.getLocahot()
			uni.getLocation({
				type: 'gcj02',
				geocode:true,
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					Object.keys(res.address).forEach(key => {
						that.addressDetails += res.address[key]
					})
					that.markers.push({
						id: 235,
						latitude: Number(res.latitude),
						longitude: Number(res.longitude),
						iconPath: "/static/img/map/myLoca.png",
					}) 
				}
			});
			
		},
		onShow() {
			this.getsellpNum()
		},
		methods: {
			async getsellpNum(){
				const res = await home.elevatorTiringListNum({});
				if(res){
					this.Sellp = res.data.data;
					this.tiringCount = res.data.data.tiringCount;
					this.faultCount = res.data.data.faultCount;
				}
			},
			// 底部弹框
			showBottom(){
				if(authentication(this.getUserInfo.reviewStatus)){
					// #ifdef APP-PLUS
					let that = this;
					const subNVue = uni.getSubNVueById('concat')
					subNVue.show('slide-in-bottom', 300, function() {});
					uni.$on('page-popup', (data) => {
						subNVue.hide('fade-out', 300)
						uni.$off('page-popup')
						that.navRouter(data) 
					})
					// #endif
					// #ifdef H5
					this.tip("浏览器未开发")
					// #endif
				}
			},
			// 签到
			async signin(){
				if(authentication(this.getUserInfo.reviewStatus)){
					let parme = {
						latitude:this.latitude,
						longitude:this.longitude,
						addressDetails :this.addressDetails,
					}
					const res = await sign.userSignClockSave(parme);
					if (res) {
						this.tip("签到成功")
					}
				}
				
			},
			// 电梯列表展示
			async getLocahot() {
				const res = await home.homeElevatorInfoList({})
				this.MasterArr = res.data.data.list
				res.data.data.list.filter((item, index) => {
					this.markers.push({
						id: index,
						latitude: Number(item.latitude),
						longitude: Number(item.longitude),
						iconPath: "/static/img/map/place2.png",

					})
				})
			},
			// 点击列表点
			async makerTap(e) {
				if (e.detail.markerId != 235) {
					this.markers.splice(e.detail.markerId, 1, {
						id: e.detail.markerId,
						latitude: Number(this.markers[e.detail.markerId].latitude),
						longitude: Number(this.markers[e.detail.markerId].longitude),
						iconPath: "/static/img/map/pitch2.png",
					})
					const res = await home.homeElevatorInfo({
						latitude: this.latitude,
						longitude: this.longitude,
						elevatorId: this.MasterArr[e.detail.markerId].elevatorId
					});
					this.currentInd = res;
					uni.$emit('masterInfo', res.data.data);
					const subNVue = uni.getSubNVueById('bottopop')
					// 打开 nvue 子窗体  
					subNVue.show('slide-in-bottom', 300, function() {});

	
					uni.$on('masterHide', (data) => {
						this.markers.splice(e.detail.markerId, 1, {
							id: e.detail.markerId,
							latitude: Number(this.markers[e.detail.markerId].latitude),
							longitude: Number(this.markers[e.detail.markerId].longitude),
							iconPath: "/static/img/map/place2.png",
						})
					})
					
					// this.currentMapMasterInd = e.detail.markerId
				}
			},
			
			async search(val) {
				
			},
			// 跳转地点页
			goNavigation() {
				uni.navigateTo({
					url: "./navigation"
				})
			}
		}
	}
</script>

<style scoped>
	.toolBarView{
		width: 80%;
		height: 50px;
		left:10%;
		position: fixed;
		bottom: 80rpx;
		background-color: #fff; 
		border-radius: 50px;
		text-align: center;
		font-size: 36rpx; 
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
	}
	
	.rightCoverView{
		right: 20px;
		position: fixed;
		top: 25vh;
		display: flex;
		width: 60px;
		height: 130px;
		justify-content: center;
		background-color: #f2f2f2;
		align-items: center;
	}
	
	
	.toolBarView .btn-operater-view{
		width:120px;
		height:50px;
		line-height: 50px;
		position: relative;
	}
	
	.toolBarView .btn-operater-view .badgeView{
		width: 20px;
		height: 15px;
		background: #FF5753;
		border-radius: 11px;
		text-align: center;
		line-height: 15px;
		font-size: 9px;
		color: #FFFFFF;
		position: absolute;
		top: 5px;
		left: 40px;
	}
	
	.toolBarView .icon-operater{
		width: 30px;
		height:30px;
		vertical-align: middle;
	}
	
	.toolBarView .icon-text{
		font-size: 14px;
		color:#000;
		margin-left: 10px;
	}
	
	.toolBarView .btn-middle{
		width: 50px;
		height: 50px;
		line-height: 50px;
		position: absolute;
		background-color: #017efe;
		color: #fff;
		font-size: 16px;
		border-radius: 50%;
		z-index: 9999;
		left: calc(100% - 200px);
	}
	
	.toolBarView .btn-middle2{
		width:70px;
		height:70px;
		line-height: 70px;
		position: absolute;
		background-color: #017efe;
		color:#fff;
		font-size:16px;
		border-radius: 50%;
		z-index: 9999;
		left:calc(100% - 200px);
		top:-10px;
	}
	
	
	.left {
		position: fixed;
		left: 40rpx;
	}

	.top70 {
		/* #ifdef  H5 */
		bottom: 30vh;
		/* #endif */
		/* #ifdef  APP-PLUS */
		bottom: 20vh;
		/* #endif */
	}

	.top75 {
		/* #ifdef  H5 */
		bottom: calc(30vh - 90rpx);
		/* #endif */
		/* #ifdef  APP-PLUS */
		bottom: calc(20vh - 90rpx);
		/* #endif */
	}
	
	.singIn{
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		/* #ifdef  H5 */
		bottom: 150rpx;
		/* #endif */
		/* #ifdef  APP-PLUS */
		bottom: 80rpx;
		/* #endif */
		background-color: #017EFE; 
		border-radius: 50%;
		text-align: center;
		line-height: 150rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		left: 100rpx;
		
	}
	.Reporting{
		left: auto;
		right: 100rpx;
		background-color: #3AC211;
	}
	
	.w80 {
		width: 40px;
		height: 40px;
	}

	.right {
		position: fixed;
		right: 56rpx;
	}

	.top1 {
		top: 20vh;
	}
	.SleepyNumber{
		width: 40rpx;
		height: 40rpx;
		background: #FF5753;
		border-radius: 20rpx;
		text-align: center;
		line-height: 35rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		position: fixed;
		
		right: 50rpx;
		top: 19vh;
		
	}

	.top2 {
		top: calc(20vh + 100rpx);
	}

	.top3 {
		top: calc(20vh + 200rpx);
	}
	
	.content {
		position: fixed;
		top: 30rpx;
		width: 80vw;
		left: 50%;
		transform: translateX(-50%);
	}

	.bottomInfo {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.infoBox {
		padding: 30rpx 40rpx 0;
	}

	.infoBottom {
		padding-bottom: 15rpx;
		padding-top: 15rpx;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #E2E6EF;
		margin-top: 10rpx;
		display: flex;
	}

	.distance {
		font-weight: bold;
		font-size: 44rpx;
	}

	.company {
		color: #989BA6;
		font-size: 24rpx;
	}

	.wds50 {
		flex: 1;
		text-align: center;
	}
</style>
